<template>
  <div class="container">
    <el-card>
      <!-- 表单筛选区域 -->
      <el-form inline>
        <el-form-item label="面试题搜索">
          <el-input
            v-model="queryData.word"
            clearable
            size="small"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="作者搜索">
          <el-input
            v-model="queryData.author"
            clearable
            size="small"
            placeholder="请输入"
          />
        </el-form-item>

        <el-form-item label="状态">
          <el-select
            v-model="queryData.status"
            clearable
          >
            <el-option
              v-for="item in menu"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            size="small"
            @click="onSubmit"
          >搜索</el-button>
          <el-button size="small" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 操作区域 -->
      <el-row type="flex" justify="space-between" align="middle">
        <!-- 左侧 -->
        <div class="left">
          <el-button
            type="primary"
            plain
            size="small"
            icon="el-icon-plus"
            @click="$refs.addForm.dialogShow = true"
          >新增</el-button>
        </div>
        <!-- 右侧 -->
      </el-row>
      <br>
      <!-- 表格区域 -->
      <el-table :data="list" border>
        <el-table-column type="index" label="#" />
        <el-table-column prop="id" label="面试题ID" />
        <el-table-column prop="word" label="面试题" />
        <el-table-column prop="status" label="面试题状态">
          <template #default="{ row }">
            <el-switch
              v-model="row.status"
              active-text="已背"
              inactive-text="未背"
              :active-value="1"
              :inactive-value="0"
              @change="switchChange($event, row)"
            />
          </template>
        </el-table-column>
        <el-table-column prop="author" label="面试题作者" />
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button
              type="primary"
              circle
              icon="el-icon-edit"
              @click="editRow(row.id)"
            />
            <el-button
              circle
              type="danger"
              icon="el-icon-delete"
              @click="delRow(row.id)"
            />
          </template>
        </el-table-column>
      </el-table>
      <br>
      <!-- 分页区域 -->
      <el-pagination
        :current-page.sync="queryData.page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="queryData.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalNum"
        background
        @size-change="sizeChange"
        @current-change="currentChange"
      />
    </el-card>

    <!-- 新增、修改弹框区域 -->
    <addForm ref="addForm" @updateList="initData" />
  </div>
</template>
<script>
import {
  getContentInerviewList,
  updateContentInerview,
  getContentInerviewDetail,
  delContentInerviewList
} from '@/api/inerview'
import addForm from './components/addForm.vue'
export default {
  name: 'InerviewPage',
  components: {
    addForm
  },
  data() {
    return {
      menu: [{ label: '已背', value: 1 }, { label: '未背', value: 0 }], // 枚举
      list: [], // 表格数据
      totalNum: 0, // 总数
      // 列表的需要的参数
      queryData: {
        word: '', // 词汇
        author:'',
        status: null,
        page: 1,
        limit: 5
      },
      loading: false
    }
  },
  created() {
    // 调用初始化
    this.initData()
  },
  methods: {
    // 开关
    async switchChange(status, node) {
      const res = await updateContentInerview({ status, ...node })
      console.log(res)
      this.$message.success('修改成功')
    },
    // 初始化数据
    async initData() {
      // 发起请求
      const { data } = await getContentInerviewList(this.queryData)
      // console.log(data)
      // console.log(this.queryData.page)
      // 数据可能需要加工
      // 赋值
      this.totalNum = data.data.total
      this.list = data.data.list
    },
    // 搜索提交
    onSubmit() {
      // 页码变成1
      this.queryData.page = 1
      // 拉取列表
      this.initData()
    },
    // 搜索重置
    onReset() {
      // 重置搜索表单
      this.queryData = {
        word: '',
        status: '',
        page: 1,
        limit: 5
      }
      // 拉取列表
      this.initData()
    },
    // 每页数量变化的时候
    sizeChange(newSize) {
      // newSize 最新的每页数量
      this.queryData.limit = newSize
      this.initData()
    },
    // 页码变化事件
    currentChange(newPage) {
      // newPage 最新的页码
      this.queryData.page = newPage
      this.initData()
    },
    // 修改事件
    async editRow(rowId) {
      // 获取改行的数据
      const res = await getContentInerviewDetail(rowId)
      // console.log(res)
      // 赋给弹框里面的表单
      this.$refs.addForm.formData = res.data.data
      // 复杂点：一些负责的表单控件需要手动去回显
      // 打开弹框
      this.$refs.addForm.dialogShow = true
    },
    // 删除事件
    async delRow(rowId) {
      console.log(rowId)
      // 弹出确认框
      // this.loading = true
      await this.$confirm('确认删除吗')
      // 发生删除请求
      const res = await delContentInerviewList(rowId)
      console.log(res)
      // 提示成功
      this.$message.success('删除成功')
      // // 边缘问题：如果不是第一页，且这一页只有一个，且删除成功，页码需要-1
      if (this.queryData.page > 1 && this.list.length === 1) {
        this.queryData.page--
      }
      // this.loading = false
      // 列表更新
      this.initData()
    }
  }
}
</script>
<style scoped>
  .content{
    width: 100%;
    height: 100%;
    /* background-color: #e9ecf0; */
  }
  .content_one{
    margin: 15px;
    background-color: #fff;
  }
</style>

